<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="410px" style="height: 100vh">
        <el-card style=" margin-bottom: 8px">
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">图片</h1>
          <el-upload
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
          >
            上传图片
          </el-upload>
        </el-card>
        <el-card style="max-width: 400px">
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">
            返回图片数(可能被过滤部分)
          </h1>
          <el-slider v-model="value1" />
          <el-divider />
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">
            模型选择
          </h1>
          <el-radio-group
            v-model="radio1"
            style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
            "
          >
            <el-radio value="1" size="large" border style="margin-bottom: 12px"
              >中文CLIP(CN-CLIPMT-B/16)</el-radio
            >
            <el-radio value="2" size="large" border style="margin-bottom: 12px"
              >中文CLIP(CN-CLIPMT-L/14)</el-radio
            >
            <el-radio value="3" size="large" border
              >中文CLIP(CN-CLIPMT-L/14@336px)</el-radio
            >
          </el-radio-group>
          <el-divider />
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">
            是否返回缩略图
          </h1>
          <el-radio-group v-model="radio2">
            <el-radio value="1" size="large" border style="margin-bottom: 12px"
              >是</el-radio
            >
            <el-radio value="2" size="large" border style="margin-bottom: 12px"
              >否</el-radio
            >
          </el-radio-group>
          <el-divider />
          <el-button size="large" type="primary" plain style="width: 100%"
            >搜索</el-button
          >
        </el-card>
      </el-aside>
      <el-container>
        <el-main>
          <div>
            <div style="font-weight: 700; font-size: large; margin-bottom: 4px">
              检索结果为:
            </div>
            <div>
              <el-table
                :key="tableKey"
                v-loading="imagesLoading"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%"
                @sort-change="sortChange"
              >
                <el-table-column
                  label="Index"
                  prop="id"
                  sortable="custom"
                  align="center"
                  width="100"
                  :class-name="getSortClass('id')"
                >
                  <template v-slot="{ row }">
                    <span>{{ row.id }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="Predict_texts" align="center">
                  <template v-slot="{row}">
                    <span>{{ row.Predict_texts }}</span>
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="listQuery.page"
                v-model:limit="listQuery.limit"
                @pagination="getList"
              />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { Document as IconDocument, Plus } from '@element-plus/icons-vue';
import { markRaw } from 'vue';
import { fetchList } from '@/api/article';

export default defineComponent({
  name: 'TextSearch',
  components: {},
  data() {
    return {
      IconDocument: markRaw(IconDocument),
      Plus: markRaw(Plus),
      list: null,
      listLoading: true,
      downloadLoading: false,
      filename: '',
      value1: 78,
      radio1: '1',
      radio2: '1',
      images: [],
      imagesLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      fileList: [
      // 这里可以替换你的图片地址，图片放在 public 目录下，你可以自己取文件夹名称来分类
      // 想要显示几张，这里就放几张图片地址
        {
          url: '../../../public/fileImage/images.jpeg'
        },
        {
          url: '../../../public/fileImage/下载.jpeg'
        }
      ]
    };
  },
  created() {
    this.getList();
    this.fetchDogImagesParallel(20).then((dogImages) => {
      this.images = dogImages.length > 9 ? dogImages?.splice(0, 9) : dogImages;
      this.imagesLoading = false;
    });
  },
  methods: {
    async fetchDogImagesParallel(count) {
      this.imagesLoading = true;
      const requests = Array.from({ length: count }, () =>
        fetch('https://random.dog/woof.json').then((res) => res.json())
      );
      const results = await Promise.all(requests);
      return results
        .map((data) => data.url)
        .filter((url) => url && (url.endsWith('.jpg') || url.endsWith('.png')));
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        this.list = [
          { 'id': 0, 'Predict_texts': '戚风蛋糕' },
          { 'id': 1, 'Predict_texts': '海绵蛋糕' },
          { 'id': 2, 'Predict_texts': '奶油蛋糕' },
          { 'id': 3, 'Predict_texts': '芝士蛋糕' },
          { 'id': 4, 'Predict_texts': '慕斯蛋糕' },
          { 'id': 5, 'Predict_texts': '天使蛋糕' },
          { 'id': 6, 'Predict_texts': '磅蛋糕' },
          { 'id': 7, 'Predict_texts': '黑森林蛋糕' },
          { 'id': 8, 'Predict_texts': '红丝绒蛋糕' },
          { 'id': 9, 'Predict_texts': '水果蛋糕' },
          { 'id': 10, 'Predict_texts': '巧克力蛋糕' },
          { 'id': 11, 'Predict_texts': '提拉米苏' },
          { 'id': 12, 'Predict_texts': '拿破仑蛋糕' },
          { 'id': 13, 'Predict_texts': '萨赫蛋糕' },
          { 'id': 14, 'Predict_texts': '蜂蜜蛋糕' },
          { 'id': 15, 'Predict_texts': '日式芝士蛋糕' },
          { 'id': 16, 'Predict_texts': '欧培拉蛋糕' },
          { 'id': 17, 'Predict_texts': '巴斯克蛋糕' },
          { 'id': 18, 'Predict_texts': '维多利亚蛋糕' },
          { 'id': 19, 'Predict_texts': '波士顿派蛋糕' }
        ];
        this.total = response.data.total;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === 'id') {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id';
      } else {
        this.listQuery.sort = '-id';
      }
      this.handleFilter();
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    }
  }
});
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100vw;
  height: 100vh;
}
</style>
